<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>netty</title>
</head>
<body>
<h2>发送消息：</h2>
<textarea id="content" type="text"></textarea>
<button id="btnSend" onclick="CHAT.chat()">发送</button>

<hr>
<h2>接收消息</h2>
<div id="receiveMsg" style="background-color: aquamarine;">

</div>

<script>
    window.CHAT = {
        socket: null,
        init: function () {
            if (window.WebSocket) {
                CHAT.socket = new WebSocket('ws://127.0.0.1:8081/app?000')
                CHAT.socket.onopen = function () {
                    console.log('连接建立');
                },
                    CHAT.socket.onclose = function () {
                        console.log('连接关闭');
                    },
                    CHAT.socket.onerror = function () {
                        console.log('发生错误');
                    },
                    CHAT.socket.onmessage = function (e) {
                        console.log('接收到消息' + e.data);
                        var receiveMsg = document.getElementById("receiveMsg");
                        var html = receiveMsg.innerHTML;
                        receiveMsg.innerHTML = html + '<br>' + e.data;
                    }


            } else {
                alert("当前浏览器不支持websocket");
            }
        },
        chat: function () {
            var msg = document.getElementById('content');
            CHAT.socket.send(msg.value);
        }
    }
    CHAT.init();
</script>

</body>
</html>
